{% extends "base.html" %}

{% block title %}Order {{ order.order_no }}{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto py-8">
  <h1 class="text-2xl font-semibold mb-4">Order {{ order.order_no }}</h1>

  <div class="bg-white shadow rounded-lg p-4 mb-6">
    <p>Status: {{ order.status }}</p>
    <p>Amount:
      {{ '%.2f'|format((order.amount or 0) / 100) }} {{ order.currency or 'USD' }}
    </p>
    <p>Created at: {{ order.created_at }}</p>
    {% if order.paid_at %}
      <p>Paid at: {{ order.paid_at }}</p>
    {% endif %}
  </div>

  <h2 class="text-xl font-semibold mb-2">Items</h2>
  <table class="min-w-full text-sm">
    <thead>
      <tr>
        <th class="text-left p-2">Title</th>
        <th class="text-left p-2">SKU</th>
        <th class="text-right p-2">Qty</th>
        <th class="text-right p-2">Unit Price</th>
      </tr>
    </thead>
    <tbody>
      {% for item in items %}
      <tr>
        <td class="p-2">{{ item.title }}</td>
        <td class="p-2">{{ item.sku }}</td>
        <td class="p-2 text-right">{{ item.qty }}</td>
        <td class="p-2 text-right">
          {{ '%.2f'|format((item.unit_price or 0) / 100) }} {{ order.currency or 'USD' }}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}
